<template>
  <div class="music-list">
    <div class="fix-header" :style="opacityStyle" v-show="showHeader">
      <div class="back" @click="back">
        <i class="icon-back"></i>
        <h1 class="title">{{ title }}</h1>
      </div>
    </div>
    <scroll
      :data="songs"
      class="wrapper"
      ref="scroll"
      :probeType="probeType"
      :listenScroll="listenScroll"
      @scroll="scroll">
      <div class="content">
        <div class="back" @click="back">
          <i class="icon-back"></i>
          <h1 class="title">{{ title }}</h1>
        </div>
        <div class="bg-img" :style="bgStyle"></div>
        <div class="songList">
          <div class="text">
            <p @click="random"><span class="icon-play"></span>随机播放全部</p>
            <p @click.stop="toggleFavorite">
              <span class="like">
                <i :class="getFavoriteIcon()"></i>
              </span>
              <span>{{ this.type }}</span>
            </p>
          </div>
          <music-item :songs="songs"></music-item>
        </div>
      </div>
    </scroll>
    <!-- 懒加载 -->
    <van-loading class="loading" type="spinner" vertical v-show="!this.songs.length>0"
        >数据加载中...</van-loading
      >
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { playerMixin, listMixin } from '../../common/js/mixin'
import Scroll from '@/components/base/Scroll'
import MusicItem from '@/components/common/MusicItem'
export default {
  mixins: [playerMixin, listMixin],
  props: ['title', 'bgImage', 'songs'],
  components: {
    Scroll,
    MusicItem
  },
  data () {
    return {
      showHeader: false,
      probeType: 3,
      listenScroll: true,
      scrollY: 0,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    ...mapMutations([
      'setCurrentIndex',
      'setPlayList',
      'setSequenceList',
      'setFullScreen',
      'setMode'
    ]),
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      // list是个vue components，.$el取元素
      this.$refs.wrapper.$el.style.bottom = bottom
      // console.log(this.$refs.wrapper)
      this.$refs.wrapper.refresh()
    },
    // 返回功能
    back () {
      this.$router.back()
    },
    scroll (pos) {
      if (pos.y > 0) return
      this.scrollY = Math.abs(pos.y)
      if (this.scrollY > 40) {
        let opacity = this.scrollY / 263
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showHeader = true
      } else {
        this.showHeader = false
      }
    },
    selectItem (index) {
      // 传递当前歌曲索引
      this.setCurrentIndex(index)
      // 传递当前播放列表
      this.setPlayList(this.songs)
      // 传递顺序播放列表
      this.setSequenceList(this.songs)
      // 传递是否全屏
      this.setFullScreen(true)
    },
    // 点击实现随机播放
    random () {
      let index = Math.floor(Math.random() * this.songs.length)
      // 设置随机播放
      this.setMode(2)
      // 传递当前播放歌曲索引
      this.setCurrentIndex(index)
      // 传递当前播放歌曲列表
      this.setPlayList(this.songs)
      // 传递顺序播放列表
      this.setSequenceList(this.songs)
      // 传递当前播放歌曲列表
      this.setFullScreen(true)
    }
  },
  computed: {
    ...mapState(['type']),
    bgStyle () {
      return `background-image:url(${this.bgImage});`
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'

.music-list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:10;
  overflow: hidden;
  background: $color-background;
  .fix-header {
    position: fixed;
    display: flex;
    align-items:center;
    padding: 0 6px;
    width: 100%;
    height: 40px;
    background: $color-highlight-background;
    z-index:9;
    .back {
      display: flex;
      align-items: center;
      z-index: 8;
      .icon-back {
        font-size: $font-size-large-x;
        color: $color-theme;
      }
      h1 {
        margin-left: 20px;
      }
    }
  }
  .wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .back{
      position:absolute;
      top: 10px;
      display: flex;
      align-items: center;
      width: 100%;
      .icon-back {
        font-size: 20px;
        color: $color-theme;
        margin-left: 10px;
      }
      .title {
        margin-left: 20px;
      }
    }
    .bg-img {
      width: 100%;
      height: 0;
      padding-bottom: 70%;
      background-size: cover;
    }
    .songList {
      padding: 20px 20px 0 20px;
      .text {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        .icon-play {
          margin-right: 6px;
        }
        .like {
          padding-right: 6px;
        }
      }
      .songs-msg {
        margin-top: 10px;
        .song-title {
          display: flex;
          justify-content: space-between;
        }
        .singer-name {
          font-size: 12px;
          color: #6d6d6d;
          line-height: 30px;
          margin-right: 8px;
        }
      }
    }
    .icon-favorite {
      color: $color-sub-theme;
    }
  }
  .loading {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
